// 1.导入store
import { useStore } from './store'
// 2.导入中间件链接mobx react 完成响应式变化
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
function App() {
  //得到store
  let store = useStore()
  //也可以结构赋值 但是到store实例对象就行了,防止破坏响应式
  //let {counterStore}= useStore()
  useEffect(() => {
    store.ListStore.setChannelList()
  }, []);
  return (
    <div className="App">
      <div>
        {store.ListStore.filterList}
        <button onClick={store.ListStore.addList}>添加数组</button>
      </div>
      <div>
        {store.counterStore.count}
        <button onClick={store.counterStore.addCount}>+</button>
      </div>
      <div>
        请求数据:
        <ul>
          {store.ListStore.channelList.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}
// 3.包裹App
export default observer(App)
